<template>
	<view>
		<mescroll-uni ref="mescrollRef" @init="mescrollInit" @down="downCallback" :down="downOption" :up="upOption"
		 @up="upCallback"> 
			<view class="top">
				<view class="input-body">
					<input type="text" placeholder="请输入关键词搜索" :value="searchVal" confirm-type="search" @confirm="searchList">
					<view class="cancel" @tap="cancelSearch">取消</view>
				</view>
				<view class="history" v-if="searchLog.length > 0">
					<view class="show-title">
						<text class="title">搜索历史</text>
						<text class="edit fr" v-if="showDel==false" @tap.stop="showDelStatus(true)">编辑</text>
						<text class="edit fr" v-if="showDel==true" @tap.stop="showDelStatus('all')">删除全部</text>
						<text class="edit fr" v-if="showDel==true" @tap.stop="showDelStatus(false)">完成</text>
					</view>
					<view class="h-list flex align-center flex-wrap"> 
						<view class="h-detail" v-for="(item,index) in searchLog" :key="index" @tap="searchCLick(item)">{{item}}
						<text class="iconfont icon-shanchu-mian" v-if="showDel==true" @tap.stop="delLog(item)" ></text></view>
					</view>
				</view>
				<view class="temp-cate">
					<view class="sticky-tabs">
						<me-tabs v-model="tabIndex" :tabs="newsTabs" nameKey="title" :tabWidth="140" :height="80" @change="tabChange"></me-tabs>
					</view>
				</view>
			</view>
			<view class="temp-list-body">
				<view class="temp-list flex align-center" v-for="(item,index) in [{
					image:'123',
					title:'title',
					desc:'desc',
				}]" :key="index" @tap="useTemp(index)">
					<view class="left-image">
						<image :src="item.image">
					</view>
					<view class="right-body">
						<view class="title">{{item.title}}</view>
						<view class="desc">{{item.desc}}</view>
					</view>
					<text class="iconfont icon-youjiantou"></text>
				</view>
			</view>
		</mescroll-uni>
	</view>
</template>

<script src="./index.js"></script>

<style lang="scss">
	.temp-list-body{
		.temp-list{
			background: #ffffff;
			margin-top: 20rpx;
			padding: 20rpx;
			position: relative;
			padding-top: 30rpx;
			.iconfont{
				color: #999999;
				font-size: 30rpx;
			}
			.right-body{
				margin-left: 20rpx;
				width: 560rpx;
				.title{
					font-weight: bold;
					min-height: 56rpx;
					font-size: 30rpx;
					color: #1E1E28;
					margin-top: -10rpx;
				}
				.desc{
					color: #9797A8;
					font-size: 24rpx;
				}
			}
			.left-image{
				image{
					width: 90rpx;
					height: 90rpx;
					border-radius: 50%;
				}
			}
		}
	}
	.top{
		background: #ffffff;
		padding: 20rpx;
		padding-bottom: 0rpx;
		.temp-cate{
			margin-top: 20rpx;
		}
		.history{
			.show-title{
				height: 80rpx;
				line-height: 80rpx;
				padding: 0 20rpx;
				text{
					color: #999999;
					font-size: 24rpx;
					padding: 0 20rpx;
				}
			}
			.h-list{
				max-height: 120rpx;
				overflow: hidden;
				width: 100%;
				padding-top: 10rpx;
				.h-detail{
					background: #E9F9F4;
					color: #666666;
					font-size: 22rpx;
					padding: 6rpx 36rpx 6rpx 20rpx;
					border-radius: 10rpx;
					margin: 0 20rpx 20rpx 0;
					position: relative;
					.iconfont{
						position: absolute;
						color: #C2C2C2;
						right: 0;
						top: -8rpx;
						z-index: 2;
					}
				}
			}
		}
		.input-body{
			position: relative;
			input{
				height: 80rpx;
				padding:0 120rpx 0 35rpx;
				background: #F5F5F7;
				border-radius: 80rpx;
			}
			.cancel{
				color: #26C390;
				position: absolute;
				right: 0;
				top: 0;
				z-index: 1;
				width: 100rpx;
				height: 100%;
				line-height: 80rpx;
				text-align: left;
			}
		}
	}
</style>
